<template>
  <a-card :bordered="false">
    <a-row>
      <a-col :xs="18" :sm="18" :md="18" :lg="18">
        <a-input-search placeholder="输入医院名称" @search="queryHospital"/>
      </a-col>
      <a-col :xs="1" :sm="1" :md="1" :lg="1">
        &nbsp;
      </a-col>
      <a-col :xs="5" :sm="5" :md="5" :lg="5">
        <a-button
          type="primary"
          shape="round"
          icon="plus"
          block
          @click="addHospital()">新增医院信息
        </a-button>
      </a-col>
    </a-row>
    <a-divider></a-divider>
    <a-spin tip="正在查询数据" :spinning="searchSpinning">
      <a-table :dataSource="dataSource" :columns="columns" bordered rowKey="id">
        <div
          slot="filterDropdown"
          slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters }"
          style="padding: 8px"
        >
          <a-input
            v-ant-ref="c => searchInput = c"
            :value="selectedKeys[0]"
            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
            @pressEnter="() => handleSearch(selectedKeys, confirm)"
            style="width: 188px; margin-bottom: 8px; display: block;"
          />
          <a-button
            type="primary"
            @click="() => handleSearch(selectedKeys, confirm)"
            icon="search"
            size="small"
            style="width: 90px; margin-right: 8px"
          >搜索</a-button
          >
          <a-button
            @click="() => handleReset(clearFilters)"
            size="small"
            style="width: 90px"
          >重置</a-button
          >
        </div>
        <a-icon
          slot="filterIcon"
          slot-scope="filtered"
          type="search"
          :style="{ color: filtered ? '#108ee9' : undefined }"
        />
        <template slot="customRender" slot-scope="text">
          <span v-if="searchText">
            <template
              v-for="(fragment, i) in text.toString().split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
            >
              <mark v-if="fragment.toLowerCase() === searchText.toLowerCase()" :key="i">{{ fragment }}</mark>
              <template v-else >{{ fragment }}</template>
            </template>
          </span>
          <template v-else>{{ text }}</template>
        </template>
        <template slot="operation" slot-scope="text, record">
          <div class="editable-row-operations" style="width: 90px">
            <span>
              <a-button-group size="small">
                <a-tooltip placement="top">
                  <template slot="title">
                    <span>点击查看更多信息</span>
                  </template>
                  <a-button type="primary" icon="info" @click="openViewHospitalInfoPanel(record.id)"></a-button>
                </a-tooltip>
                <a-popconfirm
                  title="确认删除？"
                  @confirm="handleDeleteHospital(record.id)"
                  okText="确认"
                  cancelText="返回">
                  <a-icon slot="icon" type="question-circle-o" style="color: red" />
                  <a-button type="danger" icon="delete"/>
                </a-popconfirm>
              </a-button-group>
            </span>
          </div>
        </template>
      </a-table>
    </a-spin>
    <a-drawer
      width="800"
      placement="right"
      :closable="false"
      @close="closeViewHospitalInfoPanel"
      :visible="viewHospitalInfoPanelVisible"
    >
      <template slot="title">
        <a-row>
          <a-col :span="20">医院详情</a-col>
          <a-col :span="4">
            <a-button-group>
              <a-tooltip>
                <template slot="title">
                  <span>点击修改医院信息</span>
                </template>
                <a-button type="primary" @click="openUpdateHospitalInfoPanel(currentHospitalID)" icon="edit"></a-button>
              </a-tooltip>
              <a-popconfirm
                title="确认删除？"
                @confirm="handleDeleteHospital(currentHospital.id)"
                okText="确认"
                cancelText="返回">
                <a-icon slot="icon" type="question-circle-o" style="color: red" />
                <a-button type="danger" icon="delete"/>
              </a-popconfirm>
            </a-button-group>
          </a-col>
        </a-row>
      </template>
      <a-spin :spinning="viewHospitalInfoSpinning">
        <detail-list :col="1">
          <detail-list-item term="医院名称">{{ currentHospital.name }}</detail-list-item>
        </detail-list>
        <detail-list>
          <detail-list-item term="所在城市">{{ currentHospital.city }}</detail-list-item>
          <detail-list-item term="员工数量">{{ currentHospital.staffCount }}人</detail-list-item>
        </detail-list>
        <detail-list :col="1">
          <detail-list-item term="联系地址">{{ currentHospital.address }}</detail-list-item>
        </detail-list>
        <detail-list :col="1" v-if="currentHospital.qualified">
          <detail-list-item term="审核通过备注">{{ currentHospital.qualificationComment }}</detail-list-item>
        </detail-list>
        <detail-list :col="1" v-if="currentHospital.directAccept">
          <detail-list-item term="接收物资备注">{{ currentHospital.directAcceptComment }}</detail-list-item>
        </detail-list>
        <detail-list :col="1" v-if="currentHospital.remark != ' '">
          <detail-list-item term="备注">{{ currentHospital.remark }}</detail-list-item>
        </detail-list>
        <a-divider/>
        <a-table
          :rowSelection="{selectedRowKeys: selectedDemandRowKeys, onChange: onSelectDemandChange}"
          rowKey="id"
          :columns="demandColumns"
          :dataSource="currentDemand"
          :pagination="false"
          bordered
        >
          <template slot="quantity" slot-scope="text, record">
            <div>{{ record.quantity }}{{ record.unit }}</div>
          </template>
          <template slot="demandAction" slot-scope="text, record">
            <a-button-group
              size="small"
              style="width: 90px"
            >
              <a-button type="primary" icon="edit" @click="openUpdateDemandInfoPanel(record.id)"/>
              <a-popconfirm
                title="确认删除？"
                @confirm="handleDeleteDemand(record.id)"
                okText="确认"
                cancelText="返回">
                <a-icon slot="icon" type="question-circle-o" style="color: red" />
                <a-button type="danger" icon="delete"/>
              </a-popconfirm>
            </a-button-group>
          </template>
          <template slot="level" slot-scope="text, record">
            <div v-if="record.level == 7">七天内告急</div>
            <div v-if="record.level == 6">六天内告急</div>
            <div v-if="record.level == 5">五天内告急</div>
            <div v-if="record.level == 4">四天内告急</div>
            <div v-if="record.level == 3">三天内告急</div>
            <div v-if="record.level == 2">两天内告急</div>
            <div v-if="record.level == 1">一天内告急</div>
            <div v-if="record.level == 0">已无此类物资</div>
          </template>
          <template slot="title">
            <a-row>
              <a-col :span="16">需求列表</a-col>
              <a-col :span="4"><a-button type="danger" @click="deleteSelectDemand" icon="delete" :disabled="!hasDemandSelected" :loading="deleteSelectDemandLoading">删除选中</a-button></a-col>
              <a-col :span="4"><a-button type="primary" icon="plus" @click="openAddDemandPanel(currentHospitalID)">添加需求</a-button></a-col>
            </a-row>
          </template>
        </a-table>
        <a-divider/>
        <a-table
          :rowSelection="{selectedRowKeys: selectedContactRowKeys, onChange: onSelectContactChange}"
          rowKey="id"
          :columns="contactColumns"
          :dataSource="currentContact"
          :pagination="false"
          bordered
        >
          <template slot="contactAction" slot-scope="text, record">
            <a-button-group size="small">
              <a-button type="primary" icon="edit" @click="openUpdateContactInfoPanel(record.id)"/>
              <a-popconfirm
                title="确认删除？"
                @confirm="handleDeleteContact(record.id)"
                okText="确认"
                cancelText="返回">
                <a-icon slot="icon" type="question-circle-o" style="color: red" />
                <a-button type="danger" icon="delete"/>
              </a-popconfirm>
            </a-button-group>
          </template>
          <template slot="title">
            <a-row>
              <a-col :span="16">联系人列表</a-col>
              <a-col :span="4"><a-button type="danger" @click="deleteSelectContact" icon="delete" :disabled="!hasContactSelected" :loading="deleteSelectContactLoading">删除选中</a-button></a-col>
              <a-col :span="4"><a-button type="primary" icon="plus" @click="openAddContactPanel(currentHospitalID)">添加联系人</a-button></a-col>
            </a-row>
          </template>
        </a-table>
        <a-divider />
        <a-button type="primary" icon="left" @click="closeViewHospitalInfoPanel">我知道了</a-button>
      </a-spin>
    </a-drawer>
    <a-modal
      title="添加医院"
      style="top: 20px;"
      :width="800"
      v-model="addHospitalPanelVisible"
    >
      <template slot="footer">
        <a-button type="primary" icon="check-circle" :loading="addHospitalLoading" @click="handleAddHospital" block>
          确认提交
        </a-button>
      </template>
      <a-form :form="addHospitalForm">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="医院名称"
        >
          <a-input
            maxlength="20"
            v-decorator="[
              'name',
              { rules: [{ required: true, message: '医院名称不可以为空哦！' }] },
            ]"
            placeholder="医院名称"
            allowClear/>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="所在城市"
        >
          <a-input
            maxlength="20"
            v-decorator="[
              'city',
              { rules: [{ required: true, message: '所在城市不可以为空哦！' }] },
            ]"
            placeholder="所在城市"
            allowClear/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="员工数量"
        >
          <a-input-number
            v-decorator="[
              'staffCount',
              { initialValue: 1,
                rules:
                  [{
                    pattern: new RegExp(/^[1-9]\d*$/),
                    message: '人数必须是整数！'
                  }]
              }
            ]"
            :min="1"/>人
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="地址"
        >
          <a-input
            maxlength="80"
            v-decorator="[
              'address',
              { rules: [{ required: true, message: '地址不可以为空哦！' }] },
            ]"
            placeholder="地址"
            allowClear/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="审核情况"
        >
          <a-radio-group v-decorator="['qualified',{ initialValue: 0 }]" @change="handleQualifiedChange">
            <a-radio :value="0">未审核</a-radio>
            <a-radio :value="1">已审核</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="审核备注"
          v-if="qualificationCommentIf"
          forceRender="true"
        >
          <a-textarea :rows="2" placeholder="审核备注" maxlength="50" v-decorator="['qualificationComment',{rules: [{ required: true, message: '备注不可以为空哦！' }]}]"/>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="物资接收"
        >
          <a-radio-group v-decorator="['directAccept',{ initialValue: 0 }]" @change="handleDirectChange">
            <a-radio :value="0">不可以自行接收物资</a-radio>
            <a-radio :value="1">可以自行接收物资</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="接收物资备注"
          v-if="directAcceptCommentIf"
          forceRender="true"
        >
          <a-textarea :rows="2" placeholder="接收物资备注" maxlength="50" v-decorator="['directAcceptComment',{rules: [{ required: true, message: '备注不可以为空哦！' }]}]"/>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="备注"
        >
          <a-textarea :rows="2" placeholder="备注" maxlength="80" v-decorator="['remark']"/>
        </a-form-item>

      </a-form>
    </a-modal>
    <a-modal
      title="修改医院信息"
      style="top: 20px;"
      :width="800"
      v-model="updateHospitalInfoPanelVisible"
    >
      <template slot="footer">
        <a-button type="primary" icon="check-circle" :loading="updateHospitalLoading" @click="handleUpdateHospital" block>
          确认提交修改
        </a-button>
      </template>
      <a-form :form="updateHospitalForm">
        <a-form-item :style="{ display: 'none' }">
          <a-input
            v-decorator="[
              'id',{ initialValue:currentHospital.id }]" />
        </a-form-item>
        <a-form-item :style="{ display: 'none' }" >
          <a-input
            v-decorator="[
              'code',{ initialValue:currentHospital.code }]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="医院名称"
        >
          <a-input
            maxlength="20"
            v-decorator="[
              'name',{ initialValue:currentHospital.name,rules: [{ required: true, message: '医院名称不可以为空哦！' }] }]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="所在城市"
        >
          <a-input
            maxlength="20"
            v-decorator="[
              'city',{ initialValue:currentHospital.city,rules: [{ required: true, message: '所在城市不可以为空哦！' }] }]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="员工数量"
        >
          <a-input-number
            v-decorator="[
              'staffCount',
              {
                initialValue:currentHospital.staffCount,
                rules:
                  [{
                    pattern: new RegExp(/^[1-9]\d*$/),
                    message: '人数必须是整数！'
                  }]
              },
            ]"
            :min="1" />人
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="医院地址"
        >
          <a-input
            maxlength="80"
            v-decorator="[
              'address',{ initialValue:currentHospital.address,rules: [{ required: true, message: '地址不可以为空哦！' }]}]"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="审核情况"
        >
          <a-radio-group v-decorator="['qualified',{ initialValue: currentHospital.qualified }] " @change="handleQualifiedChange">
            <a-radio :value="0">未审核</a-radio>
            <a-radio :value="1">已审核</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="审核备注"
          v-if="currentHospital.qualified"
          forceRender="true"
        >
          <a-textarea :rows="2" placeholder="审核备注" maxlength="50" v-decorator="['qualificationComment',{initialValue: currentHospital.qualificationComment,rules: [{ required: true, message: '备注不可以为空哦！' }]}]"/>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="物资接收"
        >
          <a-radio-group v-decorator="['directAccept',{ initialValue: currentHospital.directAccept }]" @change="handleDirectChange">
            <a-radio :value="0">不可以自行接收物资</a-radio>
            <a-radio :value="1">可以自行接收物资</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="接收物资备注"
          v-if="currentHospital.directAccept"
          forceRender="true"
        >
          <a-textarea
            maxlength="50"
            :rows="2"
            placeholder="接收物资备注"
            v-decorator="[
              'directAcceptComment',
              {initialValue: currentHospital.directAcceptComment,rules: [{ required: true, message: '备注不可以为空哦！' }]}]"
          />
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="备注"
        >
          <a-textarea :rows="2" placeholder="备注" maxlength="80" v-decorator="['remark',{initialValue: currentHospital.remark}]"/>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      title="添加物资需求"
      style="top: 20px;"
      :width="800"
      v-model="addDemandPanelVisible"
    >
      <template slot="footer">
        <a-button type="primary" icon="check-circle" :loading="addDemandLoading" @click="handleAddDemand" block>
          确认提交
        </a-button>
      </template>
      <a-form :form="addDemandForm">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="医院唯一标识码"
          :style="{ display: 'none' }"
        >
          <a-input
            v-decorator="[
              'hospitalId',{ initialValue:currentHospitalID }]"
            disabled="disabled"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="物资名称"
        >
          <a-input
            v-decorator="[
              'demandName',
              { rules: [{ required: true, message: '物资名称不可以为空哦！' }] },
            ]"
            placeholder="物资名称"
            allowClear/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="物资数量"
        >
          <a-input
            maxlength="6"
            v-decorator="[
              'quantity',
              {
                rules: [
                  {
                    required: true,
                    message: '数量是必填项!',
                  },
                  {
                    pattern: new RegExp(/^[1-9]\d*$/),
                    message: '数量必须是正整数！'
                  }
                ],
              },
            ]"
            placeholder="物资数量"
            allowClear>
            <a-select slot="addonAfter" style="width: 80px" v-decorator="['unit',{ initialValue:'个' }]">
              <a-select-option value="个">个</a-select-option>
              <a-select-option value="双">双</a-select-option>
              <a-select-option value="箱">箱</a-select-option>
              <a-select-option value="件">件</a-select-option>
              <a-select-option value="其他">其他</a-select-option>
            </a-select>
          </a-input>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="紧急程度"
        >
          <a-select v-decorator="['level',{ initialValue: 7 }] ">
            <a-select-option :value="7">七天内告急</a-select-option>
            <a-select-option :value="6">六天内告急</a-select-option>
            <a-select-option :value="5">五天内告急</a-select-option>
            <a-select-option :value="4">四天内告急</a-select-option>
            <a-select-option :value="3">三天内告急</a-select-option>
            <a-select-option :value="2">两天内告急</a-select-option>
            <a-select-option :value="1">一天内告急</a-select-option>
            <a-select-option :value="0">已无此类物资</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="备注"
        >
          <a-textarea :rows="2" placeholder="备注" maxlength="80" v-decorator="['remark']"/>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      title="修改物资需求"
      style="top: 20px;"
      :width="800"
      v-model="updateDemandPanelVisible"
    >
      <template slot="footer">
        <a-button type="primary" icon="check-circle" :loading="updateDemandLoading" @click="handleUpdateDemand" block>
          确认提交修改
        </a-button>
      </template>
      <a-spin :spinning="updateDemandSpinning">
        <a-form :form="updateDemandForm">
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="医院唯一标识码"
            :style="{ display: 'none' }"
          >
            <a-input
              v-decorator="[
                'hospitalId',{ initialValue:currentHospitalID }]"
              disabled="disabled"/>
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="需求物资唯一标识码"
            :style="{ display: 'none' }"
          >
            <a-input
              v-decorator="[
                'id',{ initialValue:currentDemandByID.id }]"
              disabled="disabled"/>
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="物资名称"
          >
            <a-input
              v-decorator="[
                'demandName',
                { initialValue:currentDemandByID.demandName,rules: [{ required: true, message: '物资名称不可以为空哦！' }] },
              ]"
              placeholder="物资名称"
              allowClear/>
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="物资数量"
          >
            <a-input
              maxlength="6"
              v-decorator="[
                'quantity',
                {
                  initialValue:currentDemandByID.quantity,
                  rules: [
                    {
                      required: true,
                      message: '数量是必填项!'
                    },
                    {
                      pattern: new RegExp(/^[1-9]\d*$/),
                      message: '数量必须是正整数！'
                    }
                  ],
                },
              ]"
              placeholder="物资数量"
              allowClear>
              <a-select
                slot="addonAfter"
                style="width: 80px"
                v-decorator="['unit',{
                  initialValue:currentDemandByID.unit }]">
                <a-select-option value="个">个</a-select-option>
                <a-select-option value="双">双</a-select-option>
                <a-select-option value="箱">箱</a-select-option>
                <a-select-option value="件">件</a-select-option>
                <a-select-option value="其他">其他</a-select-option>
              </a-select>
            </a-input>
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="紧急程度"
          >
            <a-select v-decorator="['level',{ initialValue: currentDemandByID.level }] ">
              <a-select-option :value="7">七天内告急</a-select-option>
              <a-select-option :value="6">六天内告急</a-select-option>
              <a-select-option :value="5">五天内告急</a-select-option>
              <a-select-option :value="4">四天内告急</a-select-option>
              <a-select-option :value="3">三天内告急</a-select-option>
              <a-select-option :value="2">两天内告急</a-select-option>
              <a-select-option :value="1">一天内告急</a-select-option>
              <a-select-option :value="0">已无此类物资</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="备注"
          >
            <a-textarea :rows="2" placeholder="备注" maxlength="80" v-decorator="['remark',{ initialValue: currentDemandByID.remark }]"/>
          </a-form-item>
        </a-form>
      </a-spin>
    </a-modal>
    <a-modal
      title="添加联系人"
      style="top: 20px;"
      :width="800"
      v-model="addContactPanelVisible"
    >
      <template slot="footer">
        <a-button type="primary" icon="check-circle" :loading="addContactLoading" @click="handleAddContact" block>
          确认提交
        </a-button>
      </template>
      <a-form :form="addContactForm">
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="医院唯一标识码"
          :style="{ display: 'none' }"
        >
          <a-input
            v-decorator="[
              'hospitalId',{ initialValue:currentHospitalID }]"
            disabled="disabled"/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="志愿者姓名"
        >
          <a-input
            v-decorator="[
              'volunteerName',
              { rules: [{ required: true, message: '志愿者姓名不可以为空哦！' }] },
            ]"
            placeholder="志愿者姓名"
            allowClear/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="联系人姓名"
        >
          <a-input
            v-decorator="[
              'hospitalContact',
              { rules: [{ required: true, message: '联系人姓名不可以为空哦！' }] },
            ]"
            placeholder="联系人姓名"
            allowClear/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="联系电话"
        >
          <a-input
            maxlength="11"
            v-decorator="[
              'phone',
              { rules: [{ required: true, message: '联系电话不可以为空哦！' }] },
            ]"
            placeholder="联系电话"
            allowClear/>
        </a-form-item>
        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="备注"
        >
          <a-textarea :rows="2" placeholder="备注" maxlength="80" v-decorator="['remark']"/>
        </a-form-item>
      </a-form>
    </a-modal>
    <a-modal
      title="修改联系人信息"
      style="top: 20px;"
      :width="800"
      v-model="updateContactPanelVisible"
    >
      <template slot="footer">
        <a-button type="primary" icon="check-circle" :loading="updateContactLoading" @click="handleUpdateContact" block>
          确认提交
        </a-button>
      </template>
      <a-spin :spinning="updateContactSpinning">
        <a-form :form="updateContactForm">
          <a-form-item
            :style="{ display: 'none' }"
          >
            <a-input
              v-decorator="[
                'hospitalId',{ initialValue:currentHospitalID }]"
              disabled="disabled"/>
          </a-form-item>
          <a-form-item
            :style="{ display: 'none' }"
          >
            <a-input
              v-decorator="[
                'id',{ initialValue:currentContactByID.id }]"
              disabled="disabled"/>
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="志愿者姓名"
          >
            <a-input
              v-decorator="[
                'volunteerName',
                { initialValue:currentContactByID.volunteerName,rules: [{ required: true, message: '志愿者姓名不可以为空哦！' }] },
              ]"
              placeholder="志愿者姓名"
              allowClear/>
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="联系人姓名"
          >
            <a-input
              v-decorator="[
                'hospitalContact',
                { initialValue:currentContactByID.hospitalContact,rules: [{ required: true, message: '联系人姓名不可以为空哦！' }] },
              ]"
              placeholder="联系人姓名"
              allowClear/>
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="联系电话"
          >
            <a-input
              maxlength="11"
              v-decorator="[
                'phone',
                { initialValue:currentContactByID.phone,rules: [{ required: true, message: '联系电话不可以为空哦！' }] },
              ]"
              placeholder="联系电话"
              allowClear/>
          </a-form-item>
          <a-form-item
            :labelCol="labelCol"
            :wrapperCol="wrapperCol"
            label="备注"
          >
            <a-textarea :rows="2" placeholder="备注" maxlength="80" v-decorator="['remark',{initialValue:currentContactByID.remark}]"/>
          </a-form-item>
        </a-form>
      </a-spin>
    </a-modal>
  </a-card>
</template>

<script>
import { getHospital, getHospitals, getHospitalById, addHospital, deleteHospital, changeHospital, addDemand, deleteDemand, getDemandById, changeDemand, addContact, changeContact, getContactById, deleteContact } from '@/api/hospital'
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item

const dataSource = []

export default {
  name: 'CardList',
  components: {
    DetailList,
    DetailListItem
  },
  data () {
    return {
      viewHospitalInfoPanelVisible: false,
      updateHospitalInfoPanelVisible: false,
      addHospitalPanelVisible: false,
      addDemandPanelVisible: false,
      updateDemandPanelVisible: false,
      addContactPanelVisible: false,
      updateContactPanelVisible: false,
      searchText: '',
      searchInput: null,
      viewHospitalInfoSpinning: false,
      searchSpinning: false,
      updateDemandSpinning: false,
      updateContactSpinning: false,
      addHospitalLoading: false,
      updateHospitalLoading: false,
      addDemandLoading: false,
      updateDemandLoading: false,
      addContactLoading: false,
      updateContactLoading: false,
      selectedDemandRowKeys: [],
      selectedContactRowKeys: [],
      deleteSelectDemandLoading: false,
      deleteSelectContactLoading: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      columns: [
        {
          title: '城市',
          width: 80,
          dataIndex: 'city',
          key: 'city',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender'
          },
          onFilter: (value, record) => record.city.toString().toLowerCase().includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              }, 0)
            }
          }
        },
        {
          title: '名称',
          width: 200,
          dataIndex: 'name',
          key: 'name',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender'
          },
          onFilter: (value, record) => record.name.toString().toLowerCase().includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              })
            }
          }
        },
        {
          title: '地址',
          width: 900,
          dataIndex: 'address',
          key: 'address',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender'
          },
          onFilter: (value, record) => record.address.toString().toLowerCase().includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: visible => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              })
            }
          }
        },
        {
          title: '操作',
          width: 80,
          dataIndex: 'id',
          key: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      demandColumns: [
        {
          title: '物资名称',
          width: 100,
          dataIndex: 'demandName'
        },
        {
          title: '数量',
          width: 100,
          scopedSlots: { customRender: 'quantity' }
        },
        {
          title: '紧急程度',
          width: 120,
          scopedSlots: { customRender: 'level' }
        },
        {
          title: '备注',
          width: 300,
          dataIndex: 'remark'
        },
        {
          title: '操作',
          width: 10,
          scopedSlots: { customRender: 'demandAction' }
        }
      ],
      contactColumns: [
        {
          title: '志愿者姓名',
          width: 80,
          dataIndex: 'volunteerName'
        },
        {
          title: '医院联系人',
          width: 80,
          dataIndex: 'hospitalContact'
        },
        {
          title: '联系电话',
          width: 60,
          dataIndex: 'phone'
        },
        {
          title: '备注',
          width: 120,
          dataIndex: 'remark'
        },
        {
          title: '操作',
          width: 80,
          scopedSlots: { customRender: 'contactAction' }
        }
      ],
      qualificationCommentIf: 0,
      directAcceptCommentIf: 0,
      currentHospitalID: '',
      currentHospital: [],
      currentDemand: [],
      currentDemandByID: {},
      currentContact: [],
      currentContactByID: {},
      dataSource
    }
  },
  beforeCreate () {
    this.addHospitalForm = this.$form.createForm(this, { name: 'add_hospital' })
    this.updateHospitalForm = this.$form.createForm(this, { name: 'update_hospital' })
    this.addDemandForm = this.$form.createForm(this, { name: 'add_demand' })
    this.updateDemandForm = this.$form.createForm(this, { name: 'update_demand' })
    this.addContactForm = this.$form.createForm(this, { name: 'add_contact' })
    this.updateContactForm = this.$form.createForm(this, { name: 'update_contact' })
  },
  beforeMount () {
    this.dataSource = this.queryHospitals()
  },
  computed: {
    hasContactSelected () {
      return this.selectedContactRowKeys.length > 0
    },
    hasDemandSelected () {
      return this.selectedDemandRowKeys.length > 0
    }
  },
  methods: {
    queryHospitals () {
      this.searchSpinning = true
      getHospital().then(res => {
        this.dataSource = res.data
        this.searchSpinning = false
      }).catch(err => {
        this.searchSpinning = false
        this.$data.error(`load Hospital err: ${err.response.data.errors[0].message}`)
      })
    },
    queryHospital (value) {
      this.searchSpinning = true
      const { $data } = this
      if (value === undefined) {
        getHospital().then(res => {
          this.dataSource = res.data
          this.searchSpinning = false
        }).catch(err => {
          this.searchSpinning = false
          $data.error(`load Hospital err: ${err.response.data.errors[0].message}`)
        })
        return
      }
      getHospitals(value).then(res => {
        this.dataSource = res.data
        this.searchSpinning = false
      }).catch(err => {
        this.searchSpinning = false
        $data.error(`load Hospital err: ${err.response.data.errors[0].message}`)
      })
    },
    addHospital () {
      this.addHospitalForm = this.$form.createForm(this, { name: 'add_hospital' })
      this.addHospitalPanelVisible = true
    },
    handleAddHospital (e) {
      e.preventDefault()
      const { $message } = this
      this.addHospitalForm.validateFields((err, values) => {
        if (!err) {
          this.addHospitalLoading = true
          addHospital(values).then(res => {
            $message.success(`添加成功`)
            this.addHospitalLoading = false
            this.addHospitalPanelVisible = false
            this.queryHospitals()
          }).catch(err => {
            this.addHospitalLoading = false
            $message.error(`添加医院信息错误: ${err.response.data.errors[0].message}`)
          })
        }
      })
    },
    handleDeleteHospital (id) {
      deleteHospital(id).then(res => {
        this.$message.success('删除成功！')
        this.queryHospitals()
        this.viewHospitalInfoPanelVisible = false
      })
    },
    openUpdateHospitalInfoPanel (id) {
      this.updateHospitalForm = this.$form.createForm(this, { name: 'update_hospital' })
      this.currentHospitalID = id
      this.updateHospitalInfoPanelVisible = true
    },
    handleUpdateHospital (e) {
      e.preventDefault()
      console.log('here')
      this.updateHospitalForm.validateFields((err, values) => {
        if (!err) {
          this.updateHospitalLoading = true
          values.staffCount = parseInt(values.staffCount)
          changeHospital(values).then(res => {
            this.$message.success('修改成功')
            this.currentHospital = res
            this.updateHospitalLoading = false
            this.updateHospitalInfoPanelVisible = false
          }).catch(err => {
            console.log(err)
            this.$message.error(`${err.response.data.errors[0].message}`)
            this.updateHospitalLoading = false
          })
        }
      })
    },
    handleQualifiedChange (value) {
      this.qualificationCommentIf = value.target.value
      this.currentHospital.qualified = !this.currentHospital.qualified
    },
    handleDirectChange (value) {
      this.directAcceptCommentIf = value.target.value
      this.currentHospital.directAccept = !this.currentHospital.directAccept
    },
    handleSearch (selectedKeys, confirm) {
      confirm()
      this.searchText = selectedKeys[0]
    },
    handleReset (clearFilters) {
      clearFilters()
      this.searchText = ''
    },
    openViewHospitalInfoPanel (id) {
      this.viewHospitalInfoSpinning = true
      this.viewHospitalInfoPanelVisible = true
      this.currentHospitalID = id
      getHospitalById(id).then(res => {
        this.currentHospital = res
        this.currentDemand = res.materialDemands
        this.currentContact = res.contacts
        this.viewHospitalInfoSpinning = false
      }).catch(err => {
        this.$data.error(`load Hospital err: ${err.response.data.errors[0].message}`)
      })
    },
    closeViewHospitalInfoPanel () {
      this.viewHospitalInfoPanelVisible = false
      this.queryHospitals()
    },
    openAddDemandPanel (id) {
      this.addDemandForm = this.$form.createForm(this, { name: 'add_demand' })
      this.addDemandPanelVisible = true
    },
    handleAddDemand (e) {
      e.preventDefault()
      const { $message } = this
      this.addDemandForm.validateFields((err, values) => {
        if (!err) {
          this.addDemandLoading = true
          values.quantity = parseInt(values.quantity)
          addDemand(values).then(res => {
            $message.success(`添加成功`)
            this.addDemandLoading = false
            this.addDemandPanelVisible = false
            getHospitalById(values.hospitalId).then(res => {
              this.currentDemand = res.materialDemands
            })
          }).catch(err => {
            this.addDemandLoading = false
            $message.error(`add demand err: ${err.response.data.errors[0].message}`)
          })
        }
      })
    },
    openUpdateDemandInfoPanel (id) {
      this.updateDemandSpinning = true
      this.updateDemandForm = this.$form.createForm(this, { name: 'update_demand' })
      getDemandById(this.currentHospitalID, id).then(res => {
        this.currentDemandByID = res
        this.updateDemandSpinning = false
      })
      this.updateDemandPanelVisible = true
    },
    handleUpdateDemand (e) {
      e.preventDefault()
      this.updateDemandForm.validateFields((err, values) => {
        if (!err) {
          this.updateDemandLoading = true
          values.quantity = parseInt(values.quantity)
          changeDemand(values).then(res => {
            this.$message.success('修改成功')
            getHospitalById(values.hospitalId).then(res => {
              this.currentDemand = res.materialDemands
            })
            this.updateDemandLoading = false
            this.updateDemandPanelVisible = false
          }).catch(err => {
            this.updateDemandLoading = false
            this.$message.error(`update demand err: ${err.response.data.errors[0].message}`)
          })
        }
      })
    },
    handleDeleteDemand (id) {
      deleteDemand(this.currentHospitalID, id).then(res => {
        getHospitalById(this.currentHospitalID).then(res => {
          this.currentDemand = res.materialDemands
        })
        this.$message.success(`删除成功`)
      }).catch(err => {
        this.$message.error(`delete demand err: ${err.response.data.errors[0].message}`)
      })
    },
    openAddContactPanel (id) {
      this.addContactForm = this.$form.createForm(this, { name: 'add_contact' })
      this.addContactPanelVisible = true
    },
    handleAddContact (e) {
      e.preventDefault()
      const { $message } = this
      this.addContactForm.validateFields((err, values) => {
        if (!err) {
          this.addContactLoading = true
          addContact(values).then(res => {
            $message.success(`添加成功`)
            this.addContactLoading = false
            getHospitalById(values.hospitalId).then(res => {
              this.currentContact = res.contacts
            })
            this.addContactPanelVisible = false
          }).catch(err => {
            this.addContactLoading = false
            $message.error(`add contact err: ${err.response.data.errors[0].message}`)
          })
        }
      })
    },
    openUpdateContactInfoPanel (id) {
      this.updateContactSpinning = true
      this.updateContactForm = this.$form.createForm(this, { name: 'update_contact' })
      getContactById(this.currentHospitalID, id).then(res => {
        this.currentContactByID = res
        this.updateContactSpinning = false
      })
      this.updateContactPanelVisible = true
    },
    handleUpdateContact (e) {
      e.preventDefault()
      this.updateContactForm.validateFields((err, values) => {
        if (!err) {
          this.updateContactLoading = true
          changeContact(values).then(res => {
            this.$message.success('修改成功')
            getHospitalById(values.hospitalId).then(res => {
              this.currentContact = res.contacts
            })
            this.updateContactLoading = false
            this.updateContactPanelVisible = false
          }).catch(err => {
            this.updateContactLoading = false
            this.$message.error(`update contact err: ${err.response.data.errors[0].message}`)
          })
        }
      })
    },
    handleDeleteContact (id) {
      deleteContact(this.currentHospitalID, id).then(res => {
        getHospitalById(this.currentHospitalID).then(res => {
          this.currentContact = res.contacts
        })
        this.$message.success(`删除成功`)
      }).catch(err => {
        this.$message.error(`delete contact err: ${err.response.data.errors[0].message}`)
      })
    },
    onSelectContactChange (selectedContactRowKeys) {
      this.selectedContactRowKeys = selectedContactRowKeys
    },
    deleteSelectContact () {
      this.deleteSelectContactLoading = true
      this.selectedContactRowKeys.forEach(element => {
        deleteDemand(this.currentHospitalID, element).then(res => {
          getHospitalById(this.currentHospitalID).then(res => {
            this.currentContact = res.contacts
          })
        }).catch(err => {
          this.$message.error(`删除联系人失败: ${err.response.data.errors[0].message}`)
        })
      })
      this.deleteSelectContactLoading = false
      this.$message.success(`删除成功`)
      this.selectedContactRowKeys = []
    },
    onSelectDemandChange (selectedDemandRowKeys) {
      this.selectedDemandRowKeys = selectedDemandRowKeys
    },
    deleteSelectDemand () {
      this.deleteSelectDemandLoading = true
      this.selectedDemandRowKeys.forEach(element => {
        deleteDemand(this.currentHospitalID, element).then(res => {
          getHospitalById(this.currentHospitalID).then(res => {
            this.currentDemand = res.materialDemands
          })
        }).catch(err => {
          this.$message.error(`删除物资失败: ${err.response.data.errors[0].message}`)
        })
      })
      this.deleteSelectDemandLoading = false
      this.$message.success(`删除成功`)
      this.selectedDemandRowKeys = []
    }
  }
}
</script>
